<template>
	<a-spin :spinning="loadSpinning">
		<a-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			layout="vertical"
			:label-col="{ ...layout.labelCol, offset: 0 }"
			:wrapper-col="{ ...layout.wrapperCol, offset: 0 }"
		>
			<a-form-item label="单用户登录开关：" name="LOGIN_SINGLE_OPEN">
				<a-radio-group
					v-model:value="formData.LOGIN_SINGLE_OPEN"
					:options="commonSwitchOptions"
					placeholder="请选择单用户登录开关："
				></a-radio-group>
			</a-form-item>
			<a-form-item label="登录错误次数：" name="LOGIN_ERROR_COUNT">
				<a-input-number
					style="width: 200px"
					v-model:value="formData.LOGIN_ERROR_COUNT"
					:min="0"
					:max="999"
					addon-after="次"
					placeholder="请输入登录错误次数"
				/>
			</a-form-item>
			<a-form-item label="登录错误重置时间：" name="LOGIN_ERROR_RESET_TIME">
				<a-input-number
					style="width: 200px"
					v-model:value="formData.LOGIN_ERROR_RESET_TIME"
					:min="1"
					:max="10080"
					addon-after="分钟"
					placeholder="请输入错误重置时间"
				/>
			</a-form-item>
			<a-form-item label="锁定时长：" name="LOGIN_ERROR_LOCK">
				<a-input-number
					style="width: 200px"
					v-model:value="formData.LOGIN_ERROR_LOCK"
					:min="1"
					:max="10080"
					addon-after="分钟"
					placeholder="请输入锁定时长"
				/>
			</a-form-item>
			<a-form-item label="验证码开关：" name="LOGIN_CAPTCHA_OPEN">
				<a-radio-group
					v-model:value="formData.LOGIN_CAPTCHA_OPEN"
					:options="commonSwitchOptions"
					placeholder="请选择验证码开关"
				></a-radio-group>
			</a-form-item>
			<a-form-item label="验证码类型：" name="LOGIN_CAPTCHA_TYPE">
				<a-radio-group
					v-model:value="formData.LOGIN_CAPTCHA_TYPE"
					:options="captchaTypeOptions"
					placeholder="请选择验证码类型"
				></a-radio-group>
			</a-form-item>
			<a-form-item>
				<a-button type="primary" :loading="submitLoading" @click="onSubmit()">保存</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
			</a-form-item>
		</a-form>
	</a-spin>
</template>

<script setup name="loginForm">
	import { required } from '@/utils/formRules'
	import { cloneDeep } from 'lodash-es'
	import { message } from 'ant-design-vue'
	import configApi from '@/api/dev/configApi'
	import tool from '@/utils/tool'

	const formRef = ref()
	const formData = ref({})
	const submitLoading = ref(false)
	const loadSpinning = ref(false)
	const layout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 12
		}
	}
	// 验证码类型
	const captchaTypeOptions = [
		{
			value: 'NUM',
			label: '纯数字验证码'
		},
		{
			value: 'CHAR',
			label: '数字加字母验证码'
		},
		{
			value: 'ARITH',
			label: '数字运算验证码'
		}
	]
	const category = 'LOGIN_POLICY'
	// 查询此界面的配置项,并转为表单
	const param = {
		category: category
	}
	configApi.configList(param).then((data) => {
		loadSpinning.value = false
		if (data) {
			data.forEach((item) => {
				formData.value[item.configKey] = item.configValue
			})
		} else {
			message.warning('表单项不存在，请初始化数据库')
		}
	})
	// 默认要校验的
	const formRules = {
		LOGIN_SINGLE_OPEN: [required('请选择单用户登录开关')],
		LOGIN_CAPTCHA_OPEN: [required('请选择验证码开关')],
		LOGIN_CAPTCHA_TYPE: [required('请选择验证码类型')],
		LOGIN_ERROR_COUNT: [required('请输入登录错误次数')],
		LOGIN_ERROR_RESET_TIME: [required('请输入重置计数时间')],
		LOGIN_ERROR_LOCK: [required('请输入锁定时长')]
	}

	// 开关
	const commonSwitchOptions = tool.dictList('COMMON_SWITCH')
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			let submitParam = cloneDeep(formData.value)
			const param = Object.entries(submitParam).map((item) => {
				return {
					category: category,
					configKey: item[0],
					configValue: item[1]
				}
			})
			configApi
				.configEditForm(param)
				.then(() => {})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 重置表单，且设置默认值
	const resetForm = () => {
		formData.value = {
			LOGIN_CAPTCHA_OPEN: 'true',
			LOGIN_SINGLE_OPEN: 'true',
			LOGIN_ERROR_COUNT: 5,
			LOGIN_ERROR_RESET_TIME: 30,
			LOGIN_ERROR_LOCK: 30,
			LOGIN_CAPTCHA_TYPE: 'ARITH'
		}
	}
</script>

<style scoped></style>
